<template>
  <div class="searchpopup">
    <form action="/">
    <van-search
        v-model="searchVal"
        show-action
        :placeholder="placeholderVal"
        @search="onSearch"
        @cancel="onCancel"
        @input="onInput"
        shape="round"
        />
    </form>
    <HistoryHot v-if="blockShow==1"
     :historyKeywordList="historyKeywordList"
     :hotKeywordList="hotKeywordList"
    
     @tagClick="tagClick"/>
    <SearchList v-if="blockShow==2" :searchtipsList="searchtipsList"  @cellclick="tagClick"/>
    <Products v-if="blockShow==3" 
    :filterCategory="filterCategory" 
    :goodsList="goodsList" 
    @categoryChange="categoryChange"
    @priceChange="priceChange"
    />
  </div>
</template>

<script>
import HistoryHot from "../components/HistoryHot"
import SearchList from "../components/SearchList"
import Products from "../components/Products.vue"
import {GetSearchPopupData,GetSearchTipsListData,GetGoodsListData} from '@/utils/api'
export default {
  name:'SearchPopup',
  data(){
      return{
         searchVal:"",
         placeholderVal:"",
         blockShow:1,
         historyKeywordList:[],
         hotKeywordList:[],
         searchtipsList:[],
         goodsList:[],
         filterCategory:[],
         order:'desc',
         categoryId:0,
         sort:'id'

      }
  },
  created(){
      GetSearchPopupData().then(res=>{
          console.log(res.data)
          this.historyKeywordList = res.data.data.historyKeywordList
          this.hotKeywordList = res.data.data.hotKeywordList
      })
     
  },
  methods: {
    tagClick(val){
      this.searchVal = val
      this.onSearch(val)
    },
    priceChange(value){
      this.order= value
      this.sort = 'price'
      this.onSearch(this.searchVal)
    },
    categoryChange(value){
      this.categoryId = value
      this.onSearch(this.searchVal)
    },
    onSearch(val) {
      this.blockShow = 3
      GetGoodsListData({
        keyword:val,
        page:1,
        size:10,
        order:this.order,
        categoryId:this.categoryId,
        sort:this.sort
      
      }).then(res=>{
        let newArr = JSON.parse(JSON.stringify(res.data.data.filterCategory).replace(/name/g,'text')
        .replace(/id/g,'value'))
        this.filterCategory = newArr
        this.goodsList = res.data.data.goodsList
      })
      console.log(val);
    },
     onCancel() {
     this.$router.go(-1)
    },
    onInput(val){
        console.log(val);
        this.blockShow = 2
         GetSearchTipsListData({keyword:val}).then(res=>{
          console.log(res.data)
          this.searchtipsList = res.data.data
      })
    }
  },
  //注册组件
  components:{
      HistoryHot,SearchList,Products
  }
}
</script>

<style lang="scss" >
.searchpopup{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    background: lightgray;
}
</style>